{extend name="public/base" /}
{block name="css"}
<style>
  
  .mx-auto {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  img {
    width: 100%;
  }

  .order-container {
    border: 1px solid #FFDDBB;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px 25px;
    margin-top: 10px;
  }

  #act-order:active {
    opacity: .8;
  }

</style>
{/block}
{block name="main"}
<section>
  <!-- banner -->
  <img alt="" src="https://res.bestyoujia.com/web/ZMYJ/activities/act202103/mobile/banner_yd.jpg">
  <!-- banner end -->

  <div>
    <div class="mx-auto" style="position: relative;">
      <img alt="" src="https://res.bestyoujia.com/web/ZMYJ/activities/act202103/mobile/315活动yd-美居_02.jpg">
    </div>
    <div class="mx-auto" style="position: relative;">
      <img alt="" src="https://res.bestyoujia.com/web/ZMYJ/activities/act202103/mobile/315活动yd-美居_03.jpg">
    </div>
    <div class="mx-auto" style="position: relative;">
      <img alt="" src="https://res.bestyoujia.com/web/ZMYJ/activities/act202103/mobile/315活动yd-美居_04.jpg">
    </div>
    <div class="mx-auto" style="position: relative;">
      <img alt="" src="https://res.bestyoujia.com/web/ZMYJ/activities/act202103/mobile/315活动yd-美居_05.jpg">
    </div>
    <div class="mx-auto" style="position: relative;">
      <img alt="" src="https://res.bestyoujia.com/web/ZMYJ/activities/act202103/mobile/315活动yd-美居_06.jpg">
    </div>
    <div class="mx-auto" style="position: relative;">
      <img alt="" src="https://res.bestyoujia.com/web/ZMYJ/activities/act202103/mobile/315活动yd-美居_07.jpg">
    </div>
    <div class="mx-auto" style="position: relative;">
      <img alt="" src="https://res.bestyoujia.com/web/ZMYJ/activities/act202103/mobile/315活动yd-美居_08.jpg">
    </div>
    <div class="mx-auto" style="position: relative;">
      <img alt="" src="https://res.bestyoujia.com/web/ZMYJ/activities/act202103/mobile/315活动yd-美居_09.jpg">
      <div class="order-container" style="position: absolute">
        <div style="color: #ffffff; font-weight: bold; font-size: 17px">报名抢占活动名额&nbsp;&nbsp;享线上特惠</div>
        <input id="act-name" placeholder="您的姓名" style="height: 35px;border: 1px solid #ED5C32; width: 100%;
border-radius: 25px; text-align: center; margin-top: 15px">
        <input id="act-mobile" placeholder="联系方式" style="height: 35px;border: 1px solid #ED5C32; width: 100%;
border-radius: 25px; text-align: center; margin-top: 15px">
        <button id="act-order" style="border: 0; height: 35px; color: #ffffff; width: 100%; border-radius: 25px;
background: #ED5C32;margin-top: 15px">立即预约</button>
      </div>
      <div style="color: #ffffff;position: absolute; bottom: 20px; font-size: 14px">
        * 本次活动所有礼品不兑换现金，不找零<br/>
        * 本次活动最终解释权归优家集团所有
      </div>
    </div>
  </div>
</section>
{/block}
{block name="js"}
<script>
  $.toast.prototype.defaults.duration = 1000;
  $('#act-order').on('click', function () {
    window.page_position = '315活动页报名';
    const mobile = $('#act-mobile').val();
    const mobileStatus = validMobile(mobile);
    switch (mobileStatus) {
      case 1:
        $.showLoading("预约中");

        const data = { mobile, customer: $('#act-name').val() };

        doAppointment(data,
          function(res) {
            $.hideLoading();
            $.toast("预约成功");
            $('#act-name').val('');
            $('#act-obile').val('');
            console.log('onAppointmentSuccess', res);
            const { data = '' } = res;
            if(data) {
              buryingPoint('APPOINTMENT', data);
            }
          }, function(err) {
            console.log('onAppointmentError', err);
            $.hideLoading();
            $.toast(err, "text");
          });

        break;
      case 2:
        $.toast("手机号码格式不正确", "forbidden");
        break;
      case 3:
        $.toast("请输入手机号码", "forbidden");
        break;
    }
  });
</script>
{/block}